<template lang="pug">
  .profile-base
    .avatar-base
      img(:src="user_info.avatar")
      .name {{user_info.nickname}}
    .account-base
      .amount
        | 账户余额 
        font.number {{user_info.balance}}
        | 元
      router-link.withdraw(:to="{name: 'Withdraw'}", tag="div")
        img(:src='withdrawIcon')
        .txt 申请提现 &gt;
</template>

<script>
import SearchCoupons from './components/SearchCoupons'
import withdrawIcon from './assets/icons/withdraw.svg'
import UserInfo from './helpers/user_info'

export default {
  name: 'Profile',
  components: {
    SearchCoupons
  },
  data () {
    return {
      withdrawIcon: withdrawIcon
    }
  },
  computed: {
    user_info () {
      return UserInfo.get()
    }
  }
}
</script>
<style lang="sass">
@import './styles/color.sass';
.profile-base
  position: absolute
  top: 0
  left: 0
  width: 100%
  min-height: 100%
  background: $gray-bg
  .avatar-base
    width: 100%
    min-height: 100px
    background: linear-gradient(to right, #ffbb00, #fe9d10)
    padding: 40px 20px
    display: flex
    flex-direction: row
    justify-content: flex-start
    align-items: center
    img
      border: $white 2px solid
      border-radius: 50%
      height: 60px
      width: 60px
      margin-right: 15px
    .name
      color: $white
      font-size: 1.3em
  .account-base
    background: $white
    display: flex
    flex-direction: row
    justify-content: flex-start
    align-items: strech
    margin-bottom: 5px
    .amount
      padding: 15px
      line-height: 2em
      flex: 1 1
      color: #999
      .number
        color: $red-font
        font-size: 1.4em
    .withdraw
      display: flex
      flex-direction: column
      justify-content: space-between
      align-items: center
      padding: 10px 20px
      background: url(./assets/icons/tran-line-right.jpg) repeat-y
      background-position: left
      background-size: 10px auto
      img
        height: 20px
      .txt
        font-size: .8em
        color: #999
</style>
